<template>
  <div class="content">

    <!--  数据展示  -->
    <el-table
        :data="IsNewusers.slice((this.$store.state.currentPage-1)*pageSize,this.$store.state.currentPage*pageSize)"
        height="550"
        border
        style="width: 100%">
      <el-table-column
          prop="name"
          label="姓名"
          width="180">
      </el-table-column>
      <el-table-column
          prop="age"
          label="年龄"
          width="180">
      </el-table-column>
      <el-table-column
          prop="sex"
          label="性别"
          width="180">
      </el-table-column>
      <el-table-column
          prop="birthday"
          label="出生日期">
      </el-table-column>
      <el-table-column
          prop="address"
          label="地址">
      </el-table-column>
      <el-table-column
          prop="usertype"
          label="用户类型">
      </el-table-column>
      <el-table-column
          fixed="right"
          label="操作"
          width="200">
        <template slot-scope="scope">
          <el-button @click="Delete(scope.row.id)" type="danger" size="small">删除</el-button>
          <el-button type="info" size="small" @click="Update(scope.row)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>


    <!--  分页处理  -->
    <el-card>
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="this.$store.state.currentPage"
          :page-sizes="[9, 18, 27, 36]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="IsNewusers.length">
      </el-pagination>
    </el-card>

    <!-- form组件   -->
    <Form/>


  </div>
</template>

<script>
import DeleteRequest from "@/Network/axios";
import Form from "@/components/Form";
import UpdataRequest from "@/Network/axios";

export default {
  name: "MainTable",
  data() {
    return {
      //每页多少条
      pageSize: 9,
      IsNewusers: []
    }
  },

  methods: {

    //每页几条
    handleSizeChange(val) {
      this.pageSize = val
    },

    //当前页码
    handleCurrentChange(val) {
      this.$store.state.currentPage = val;
    },

    //删除一条数据
    Delete(UserId) {
      this.$confirm('此操作将永久删除该条数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        DeleteRequest({
          method: 'post',
          url: '/user/deleteUser',
          data: {
            id: UserId
          }
        }).then(() => {
          for (let i = 0; i <= this.IsNewusers.length; i++)
            if (this.IsNewusers[i].id == UserId) {
              this.IsNewusers.splice(i, 1)
            }
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(err => {
          console.log(err)
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },

    //编辑一条数据
    Update(User) {
      this.$store.state.GongNeng = 'Uptate';
      this.$store.state.ZT = !this.$store.state.ZT;
      this.$bus.$emit('getuser', User)
    }

  },

  components: {
    Form
  },

  mounted() {
    //接收经过过滤的数据
    this.$bus.$on('GetNewUsers', (users) => {
      this.IsNewusers = users
    });

    //接收需要修改的数据进行修改
    this.$bus.$on('Updataed', (user) => {
      UpdataRequest({
        method: 'post',
        url: '/user/updateUser',
        data: {
          id : user.id,
          name: user.name,
          age: user.age,
          sex: user.sex,
          birthday: user.birthday,
          address: user.address
        }
      }).then().catch(err => {
        console.log(err)
      })
    })

  },


}
</script>

<style scoped>
.content {
  height: 70vh;
  padding: 20px;
}
</style>